<script setup>
import { useProductStore } from '@/stores/product';
import { useShoppingCarStore } from '@/stores/shoppingCar';
import { ElMessage } from 'element-plus'

const shoppingCarStore = useShoppingCarStore();
import { computed } from 'vue';
const productStore = useProductStore();
const tableData = computed(() => productStore.products)
function addToCart(product) {
    productStore.reduceNum(product.id)

    shoppingCarStore.addItem(product)
    console.log(shoppingCarStore.shoppingCar)
    ElMessage({
        message: '已加入购物车',
        type: 'success',
    })

}
</script>
<template>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="title" label="商品名称" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="number" label="库存" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" @click="addToCart(scope.row)" :disabled="scope.row.number === 0">加入购物车</el-button>
            </template>
        </el-table-column>
    </el-table>
</template> 
<style scoped lang="scss">
.el-table {
    :deep(.el-table__cell) {
        text-align: center;
    }
}
</style>